<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale = 1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./axui/ax.min-v3.1.33.css">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
<div class="axui-container">
    <div class="axui-container" style="padding-top: 100px;">
        <div class="axui-row">
            <div class="axui-col-md-4 axui-offset-md-4">
                <div class="axui-card">
                    <div class="axui-card-header">
                        <h3 class="axui-card-title">登录</h3>
                    </div>
                    <div class="axui-card-body">
                        <form id="loginForm">
                            <div class="axui-form-group">
                                <label for="username">用户名</label>
                                <input type="text" id="username" class="axui-form-control" placeholder="请输入用户名">
                            </div>
                            <div class="axui-form-group">
                                <label for="password">密码</label>
                                <input type="password" id="password" class="axui-form-control" placeholder="请输入密码">
                            </div>
                            <div class="axui-form-group">
                                <input type="checkbox" id="rememberMe">
                                <label for="rememberMe">记住我</label>
                            </div>
                            <button type="submit" class="axui-button-primary axui-button-block">登录</button>
                            <div class="axui-text-center" style="margin-top: 15px;">
                                <a href="#" class="axui-text-primary">忘记密码？</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./axui/ax.min-v3.1.33.js" type="text/javascript"></script>
    <script type="text/javascript">
        document.getElementById('loginForm').addEventListener('submit', function (e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            // 这里可以添加登录验证逻辑，比如发送AJAX请求到后端验证
            if (username && password) {
                alert('登录成功');
            } else {
                alert('用户名或密码不能为空');
            }
        });
    </script>
</div>
</body>

</html>